<template>
	<view class="wrap" :class="[dealStatus != 3 ? 'hasPadd' : '']">
		<view class="stickyView" :style="{top:navTop + 'px'}">
			<view class="hasDone" v-if="dealStatus == 3">{{doneTxt}}</view>
			<view class="jbZxs spaceBet" v-if="type == 2">
				<view>被举报咨询师:{{bjbRealName}}</view>
				<view>被举报账号:{{bjbAccount}}</view>
			</view>
		</view>
		<view class="chart clearfix">
			<view class="chartItem"
				:class="[item.subType == 1 ? 'chartL' : 'chartR']"
				v-for="(item,index) in list"
				:key="index"
			>
				<image class="userImg imgL" v-if="item.subType == 1" src="../../../static/images/defHead.png"></image>
				<view class="innerChart" :class="[item.fbImg != '' ? 'smPadd' : '']">
					<div class="tri triL" v-if="item.subType == 1"></div>
					<div class="tri triR" v-if="item.subType == 2"></div>
					<view class="chartUser" v-if="item.subType == 1">{{item.realName}}<text class="puber">(用户)</text></view>
					<view class="chartUser" v-if="item.subType == 2">和心云<text class="puber">(客服)</text></view>
					<view class="addTime">{{item.addTime}}</view>
					<view class="detCon">
						<rich-text :nodes="item.content"></rich-text>
					</view>
					<view class="fbImg clearfix" v-if="item.fbImg != ''">
						<block v-for="(imgItem,imgIndex) in item.fbImg.split(',')" :key="imgIndex">
							<image class="imgList" mode="aspectFill" :src="formatImg(imgItem)" :data-src="formatImg(imgItem)" @tap="previewImage(item,imgIndex,$event)" ></image>
						</block>
					</view>
				</view>
				<view class="userImg imgR" v-if="item.subType == 2">
					<view class="iconfont icon-kefu"></view>
				</view>
			</view>
		</view>
		<button class="comBtn hasBotFixed" @tap="goAgainAdd" v-if="dealStatus != 3">继续添加</button>
	</view>
</template>

<script>
	import { getFeedBackDet } from '@/api/mine/index'
	export default {
		data(){
			return{
				detId:'',
				type:-1,
				list:[],
				fbId:'',
				fromPage:'',
				isRefreshFlag:false,
				dealStatus:-1,
				navTop:0,
				doneTxt:'',
				bjbRealName:'',
				bjbAccount:''
			}
		},
		computed:{
			formatImg(){
				return function(fbImgStr){
					if(fbImgStr.startsWith("http")){
						return fbImgStr
					}else{
						return this.cloudUrl + fbImgStr
					}
				}
			}
		},
		onLoad(options){
			this.detId = options.detId;
			this.fromPage = options.fromPage;
			this.type = Number(options.type);
			this.loadDet();
			var title = this.type == 1 ? '反馈详情' : '违规举报详情';
			this.doneTxt = this.type == 1 ? '该反馈已完结' : '该举报已完结';
			setTimeout(()=>{
				uni.setNavigationBarTitle({
					title
				})
			},100)
		},
		onShow(){
			if(this.isRefreshFlag){
				this.loadDet();
			}
		},
		onHide(){
			this.isRefreshFlag = false;
		},
		methods:{
			previewImage(item,index,e){
				let current = e.target.dataset.src;
				let fbImgArr = item.fbImg.split(',');
				let urls = fbImgArr.map(item=>{
					if(item.startsWith("http")){
						return item
					}else{
						return this.cloudUrl + item
					}
				});
				uni.previewImage({
					current,
					urls
				})
			},
			loadDet(){
				var field = { id:this.detId };
				getFeedBackDet(field).then(res=>{
					//console.log(res)
					let tmpRes = res.data.datas;
					this.list = tmpRes.detailList;
					this.fbId = tmpRes.id;
					this.dealStatus = tmpRes.dealStatus;
					this.bjbRealName = tmpRes.bjbRealName;
					this.bjbAccount = tmpRes.bjbAccount;
					if(this.dealStatus == 3 || this.type == 2){
						// #ifdef H5
							this.navTop = uni.getSystemInfoSync().windowTop;
						// #endif
					}
				}).catch(err=>{
					console.log(err)
				});
			},
			goAgainAdd(){
				uni.navigateTo({
					url:'../addFeedBack/addFeedBack?fromPage=' + this.fromPage + '&fbId=' + this.fbId + '&userName=' + this.bjbRealName + '&jbAcc=' + this.bjbAccount
				})
			}
		}
	}
</script>
<style lang="scss">
	page{
		background: $pss-bg-primary;
	}
</style>
<style lang="scss" scoped>
	.chart{
		padding: 30rpx;
		.chartItem{
			border-radius: 10rpx;
			margin-bottom: 30rpx;
			display: flex;
			&.chartR{
				justify-content: flex-end;
			}
			.userImg{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				flex-shrink: 0;
				&.imgL{
					margin-right: 15rpx;
				}
				&.imgR{
					margin-left: 15rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background:$pss-color-blueDeep;
					color: #fff;
					.icon-kefu{
						font-size: 50rpx;
					}
				}
			}
			.innerChart{
				width: 75%;
				background: #fff;
				padding: 20rpx;
				border-radius: 10rpx;
				position: relative;
				&.smPadd{
					padding: 20rpx 20rpx 10rpx;
				}
				.fbImg{
					margin-top: 10rpx;
				}
				.imgList{
					width: 150rpx;
					height: 150rpx;
					margin:0 15rpx 20rpx 0;
					float: left;
				}
				.tri{
					height:0px;  
					width:0px;  
					border-width:6px;  
					border-style:solid;  
					position: absolute;
					top:30rpx;
					&.triL{
						border-color:transparent #fff transparent transparent; 
						left:-24rpx;
					}
					&.triR{
						border-color:transparent transparent transparent #fff; 
						right: -24rpx;
					}
				}
			}
			&:last-child{
				margin-bottom: 0;
			}
			.chartUser{
				font-size: 30rpx;
				color: $pss-text-color3;
				font-weight: 600;
				.puber{
					font-size:24rpx;
					color: $pss-text-colora;
					font-weight: normal;
					margin-left: 10rpx;
				}
			}
			.addTime{
				font-size: 26rpx;
				color: $pss-text-colora;
				margin: 10rpx 0;
			}
			.detCon{
				color: $pss-text-color3;
				font-size: 28rpx;
			}
		}
	}
	.comBtn{
		border-radius: 0;
	}
	.stickyView{
		position: sticky;
		z-index: 10;
		.hasDone,
		.jbZxs{
			height: 60rpx;
			line-height: 60rpx;
			color: #fff;
			padding: 0 30rpx;
			font-size: 28rpx;
		}
		.hasDone{
			background: $pss-color-green;
			text-align: center;
		}
		.jbZxs{
			background: rgba(241,41,24,.8);
		}
	}
	.wrap.hasPadd{
		padding-bottom: 90rpx;
	}
</style>